import React, { Component } from 'react'
import { Form, Select, Input, Button } from 'antd';
import { EmployeeRequest, EmployeeResponse } from '../../interface/employee'
import { get } from '../../utils/request';
import { GET_EMPLOYEE_URL } from '../../constants/urls'
import { FormComponentProps } from 'antd/lib/form';

const { Option } = Select;

interface IProps extends FormComponentProps {
  onDataChange(data: EmployeeResponse): void
}

// interface IProps {
//   (data: EmployeeResponse) : void
// }
// interface IProps {
//   onDataChange: () => void
// }


class QueryForm extends Component<IProps, EmployeeRequest> {
  state: EmployeeRequest = {
    name: '',
    departmentId: undefined
  }
  handleNameChange (e: React.FormEvent<HTMLInputElement>) {
    this.setState({
      name: e.currentTarget.value
    })
  }
  handleDepartmentChange (value: number) {
    this.setState({
      departmentId: value
    })
  }
  handleSubmit () {
    this.queryEmployee(this.state)
  }
  componentDidMount () {
    this.queryEmployee(this.state)
  }
  queryEmployee (param: EmployeeRequest) {
    console.log(param)
    get(GET_EMPLOYEE_URL, param).then(res => {
      console.log('json', res)
      // this.props.onDataChange(res.data)
    })
  }


  render () {
    return (
      <Form layout="inline">
        <Form.Item>
          <Input
              placeholder="姓名"
              style={{ width: 120 }}
              allowClear
              value={ this.state.name }
              onChange={ this.handleNameChange.bind(this) }
          />
        </Form.Item>
        <Form.Item>
          <Select
              placeholder="部门"
              style={{ width: 120 }}
              allowClear
              value={ this.state.departmentId }
              onChange={ this.handleDepartmentChange.bind(this) }
            >
              <Option value={1}>技术部</Option>
              <Option value={2}>产品部</Option>
              <Option value={3}>市场部</Option>
              <Option value={4}>运营部</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={ this.handleSubmit.bind(this) }>查询</Button>
        </Form.Item>
      </Form>
    )
  }
}


const WrapQueryForm = Form.create({
  name: 'employee_query'
})(QueryForm);

export default WrapQueryForm;